<template>
  <div class="friendsList">
   <!--  好友列表-->
    <div v-for="person in personList">
      <div  :class="person.UserFirend == chooseRoom ? 'chooseFriend' : 'friend'" @click="JumpDetail(person.UserFirend)">
        <div class="leftPhot">
          <el-avatar v-if="person.headImage == ''" icon="el-icon-user-solid"></el-avatar>
          <el-avatar v-else :src="'http://42.193.17.196:8089/Images/'+person.headImage"></el-avatar>
        </div>
        <div class="rightMsg">
          <div>{{person.nickName}}</div>
<!--          显示最近一条消息-->
         <div>
           {{123}}
<!--            <div v-if="content.chooseRoom === person.UserFirend">-->
<!--               {{contentList[contentList.length-1].content}}-->
<!--            </div>-->
          </div>
          <div style="position:absolute;right: 0.5rem;top: 1.8rem;">
            <div style="width: 15px;height: 15px;line-height: 15px;background-color:red;color: #fff;
                border-radius: 50%;text-align: center;padding:1px;font-size: 13px;">3</div>
          </div>
        </div>
        <div class="timeMsg">{{person.recentChatTime}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "friendsList",
  data(){
    return{
      chooseRoom:"",//选择的房间
      personList:[],//保存好友列表
      groupList:[],//保存群聊列表
    }
  },
  // props:{
  //   contentList:{
  //     type:Array,
  //   }
  // },
  computed:{
    ...mapState({
      'accountNum':state=>state.webStore.Config.ACCOUNT_NUM,
    })
  },
  created() {
    this.getFriends();
  },
  mounted() {

    this.$store.commit("Select_friends","")
  },
  methods:{
    //获取好友列表
    getFriends(){

      this.$store.dispatch('FRIENDS',{"accountNum":this.accountNum}).then(res=> {
        if(res.success){
          for(let i in res.data){
            this.personList.push(res.data[i]);
          }

        }else{
          this.$message.error(res.msg);
        }
      })
      this.$store.dispatch('GROUPS',{"accountNum":this.accountNum}).then(res=> {
        if(res.success){
          for(let i in res.data) {
            this.personList.push(res.data[i]);
          }
        }else{
          this.$message.error(res.msg);
        }
      })
    },

    //点击跳转详情页面
    JumpDetail(id){

      if(this.chooseRoom === id){
        //已选择该好友
        this.$notify({
          title: '警告',
          message: '已经选择了该聊天室哦',
          type: 'warning'
        });

      }else{
       //需要切换另一个好友进行聊天
        this.chooseRoom = id;
        this.$emit("choose","change")
        console.log("选择好友：",id)
        this.$store.commit("Select_friends",id)
        if(sessionStorage.getItem("sendMsg")){
          this.$emit("choose","haveSessMsg")
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.friendsList{
  margin-top: 10px;
  height: 600px;
  div{
  .chooseFriend{
    margin: 0;
    padding: 0;
    height: 60px;
    background-color: rgba(104,104,104,0.1);
  }
    .friend,.chooseFriend{
      margin:5px;
      height: 60px;
      position: relative;

      .leftPhot{
        width: 50px;
        float:left;
        margin-top: 0.6rem;
      }
      .rightMsg{
        display: inline-block;
        text-align: left;
        margin-left:0.5rem;
        font-size: 11px;
        color:#686868;
        float:left;
        width: 60%;
        margin-top: 0.5rem;

        div:nth-child(1){
          font-size: 15px;
          color:#000;
          margin-bottom: 0.3rem;
        }
        div:nth-child(2){
          text-overflow:ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .timeMsg{
        position:absolute;
        top: 10px;
        right: 5px;
        font-size:5px;
        color:#686868;
      }
    }
    .friend:hover{
      margin: 0;
      padding: 0;
      height: 60px;
      background-color: rgba(104,104,104,0.1);
      cursor: pointer;
    }
  }
}
</style>